<template>
  <div class="header">
    <div class="navbar" v-if="width>576">
        <div class="logo cursor">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/logo.png" alt="">
        </div>
        <section class="content">
          <div class="items" v-for="(item,index) in navlist" :key="index">
              <div class="menu" @click.stop="pathClick(item,index)">
                  <span >{{ item.name }}</span>
                  <div>
                    <div class="drop" v-for="(child,i) in item.children" :key="i" @click.stop="towClick(item,child)" >{{ child.name }}</div>
                  </div>
              </div>
          </div>
          <div class="acea-row row-middle">
            <div class="search">
              <div>
                <i class="iconfont icon-search"></i>
              </div>
              <input type="text" v-model="keyword" @keyup="handleKey" placeholder="搜索">
            </div>
          </div>
      </section>
    </div>
    <template v-else>
      <div class="app-navbar acea-row row-between row-middle" :class="fullPath=='/'?'':'menu-not-home'">
        <div class="app-logo cursor">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/logo.png" alt="" v-if="fullPath=='/'">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/app-meun-logo.png" alt="" v-else>
        </div>
        <div class="acea-row row-middle cursor">
          <i class="iconfont icon-search white fs-22" @click.stop="open"></i>
          <i class="iconfont icon-caidan white fs-24 ml-10" @click.stop="open"></i>
        </div>
        <div class="meun-nav" :class="meunShow?'meun-nav-on':''">
          <div class="acea-row row-between row-middle p10">
            <div class="iconfont icon-arrow-left-bold fs-22" @click.stop="backpath"></div>
            <div class="app-meun-logo">
              <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/app-meun-logo.png" alt="">
            </div>
            <div class="iconfont icon-ic_cancel fs-22" @click.stop="open"></div>
          </div>
          <div class="app-search acea-row row-middle">
            <div class="iconfont icon-search white fs-22"></div>
            <input type="text" placeholder="搜索" v-model="keyword" @keyup="handleKey">
          </div>
          <div class="Top20_ProblemAnalysis">
             <div class="rightNav">
                 <ul class="tab-nav">
                     <li v-for="(i,index) in navlist" :key="index">
                         <div class="nav">
                             <span @click.stop="meunClick(i,index)">{{ i.name }}</span>
                             <i v-if="i.children.length" id="right-btn" class="iconfont icon-arrow-bottom" @click.stop="openNav(index, i.children.length)"></i>
                         </div>
                         <div class="nav-n-box">
                            <div class="nav-n" v-for="(n,l) in i.children" :key="l" @click.stop="urlClick(i,n)">{{ n.name }}</div>
                         </div>
                     </li>
                 </ul>
             </div>
          </div>
        </div>
      </div>
      <div class="meun-popup" v-if="meunShow" @click.stop="open"></div>
      <!-- 二级菜单 -->
      <div class="tow-meun" v-if="fullPath !='/' && fullPath!='/search'">
        <div class="tow-meun-nav acea-row row-between-wrapper">
          <div class="acea-row row-middle">
            <div class="iconfont icon-fanhui" v-if="!towmeunShow" @click.stop="backpath"></div>
            <div class="title">{{ meunitem.name }}</div>
          </div>
          <div class="iconfont" :class="towmeunShow?'icon-arrow-top':'icon-arrow-bottom'" @click.stop="towOpen"></div>
        </div>
        <div class="tow-meun-item" v-if="towmeunShow">
          <div class="item" v-for="(item,index) in meunitem.children" :key="index"
            @click.stop="towpath(item)"
          >{{ item.name }}</div>
        </div>
      </div>
    </template>
    <div class="tow-meun-popup" v-if="towmeunShow" @click.stop="towOpen"></div>

  </div>

</template>
<script>
  export default {
    name: "NavBar",
    props:["screenWidth"],
    data(){
      return{
        meunShow: false,
        navlist:[],
        width: 1920,
        fullPath:'/',
        towmeunShow:false,
        meunitem:null,
        keyword:'',

      }
    },
    mounted() {
      this.fullPath = this.$route.path;
      this.handleResize();
      window.addEventListener('resize', this.handleResize);
      this.getConfig();
      let item = JSON.parse(localStorage.getItem('meunitem'))
      this.meunitem = this.meunitem || item;
    },
    methods:{
      handleKey(event) {
        // 检查按下的键是哪个
        if (event.key === 'Enter') {
          console.log(event);
          this.$router.push({ path:`/search?keyword=${this.keyword}` })
        }
        // 你可以根据需要监听其他键盘事件
      },
      towpath(item){
        this.$router.push({ path:`/about?id=${this.meunitem.id}&tid=${item.id}` },()=>{}, ()=>{});
        localStorage.setItem('childitem',JSON.stringify(item))
        this.towmeunShow = !this.towmeunShow;
      },
      towClick(item,child){
        this.meunShow = false;
        this.$router.push({ path:`/about?id=${item.id}&tid=${child.id}` },()=>{}, ()=>{});
        this.meunitem = item;
        localStorage.setItem('meunitem',JSON.stringify(item))
        localStorage.setItem('childitem',JSON.stringify(child))
      },
      backpath(){
        this.meunShow = false;
        this.$router.back();
      },
      meunClick(item,index){
        if( index==0 ) return this.$router.replace({ path:'/' })
      },
      urlClick(item,child){
        this.meunShow = !this.meunShow;
        this.$router.push({ path:`/about?id=${item.id}&tid=${child.id}` })
        this.meunitem = item;
        localStorage.setItem('meunitem',JSON.stringify(item))
        localStorage.setItem('childitem',JSON.stringify(child))

      },
      pathClick(item,index){
        if( index==0 ) return this.$router.push({ path:'/' },()=>{}, ()=>{})
        this.$router.push({ path:`/about?id=${item.id}&tid=${item.children[0].id}` })
        this.meunitem = item;
        localStorage.setItem('meunitem',JSON.stringify(item))
        localStorage.setItem('childitem',JSON.stringify(item.children[0]))
      },
      towOpen(){
        this.towmeunShow = !this.towmeunShow;
      },
      handleResize() {
        this.width = window.innerWidth;
      },
      getConfig(){
        let that = this;
        that._get('/api/portal/web/categroy/list',).then(res=>{
          this.navlist = res.data.data;
        })
      },

      open(){
        this.meunShow = !this.meunShow;
        this.towmeunShow = false;
      },

      openNav(index, num) {
        let nav = document.querySelectorAll('.nav'); //获取父级菜单栏，以便添加选中样式
        let items = document.querySelectorAll('.nav-n-box'); //获取容纳子级菜单栏的容器，以便动态设置高度，实现下拉效果

        //-----------------可注释部分开始------注释后则不是手风琴效果------------------
        // 遍历菜单栏，移除所有选中后的样式   添加此段可实现手风琴效果，注释则实现多展示效果
        for (let i = 0; i < nav.length; i++) {
          if (
              items[i].style.height == '' ||
              items[i].style.height == '0rem' ||
              nav[index].classList.contains('nav-n-box-active') //判断标签内是否含有该class属性，以布尔值类型返回
          ) {
            let height = items[index].style.height;
            items[index].style.height = height;
          } else {
            items[i].style.height = '0rem';
          }
          nav[i].classList.remove('nav-n-box-active');
        }
        //-----------------可注释部分结束------------------------

        //根据子菜单栏的高度判断，是否展开菜单栏，若有进行遍历操作，那么每次点击某个菜单栏的时候 height 都为 0
        if (items[index].style.height == '' || items[index].style.height == '0rem') {
          //num 为子菜单栏的个数，根据子菜单栏确定容器的高度
          items[index].style.height = num * 2 + 'rem';
          //添加右箭头旋转样式
          nav[index].classList.add('nav-n-box-active');
        } else {
          items[index].style.height = '0rem';
          //移除右箭头旋转样式
          nav[index].classList.remove('nav-n-box-active');
        }
        //------------------------------------------
      },
    }
  }
</script>
<style scoped lang="scss">
a.clear-styles {
  color: inherit;
  text-decoration: none;
}
  .header{
    
    .navbar{
      height: 5.5rem;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99999;
      background-color: rgba(0,0,0,.2);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.25rem 0 2.5rem;

      .logo{
        width: 15.9375rem;
        height: 4.0625rem;
      }

      .content {
        display: flex;
        flex-direction: row;

        .items {
          width: 8.125rem;
          color: #fff;

          .menu{
            width: 100%;
            height: 5.5rem;
            line-height: 5.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            font-size: 1.5rem;

            &.menu:hover{
              overflow: visible;
              background-color: rgba(30, 90, 84, 0.5);
              color: white;
              z-index: 999;
              cursor: pointer;
            }

            .drop{
              background-color: rgba(30, 90, 84, 0.5);
              text-align: center;
              width: 100%;
              height: 2.8125rem;
              line-height: 2.8125rem;
              overflow: hidden;
              font-size: .875rem;
            }
            
            .drop:hover{
              background-color: rgba(30, 90, 84, 0.2);
              cursor: pointer;
            }

          }
  
        }
        
        .search{
          width: 15.0625rem;
          height: 2.875rem;
          border-radius: .3125rem;
          background-color: rgba(255,255,255,.3);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 .625rem;
          margin-left: 1.25rem;

          .icon-search{
            font-size: 1.375rem;
            color: #fff;
          }

          input{
            width: 100%;
            text-align: right;
            color: #fff;
            font-size: 1.25rem;
          }
          input::placeholder {
            font-size: 1.3rem; /* 设置placeholder的字体大小为1rem */
          }

        }

      }

    }

    .app-navbar{
      //width: 100%;
      height: 3.125rem;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99999;
      background-color: rgba(0,0,0,.2);
      //background-color: #ffffff;
      padding: 0 1.25rem;

      .app-logo{
        width: 8.5625rem;
        height: 2.1875rem;
      }

      .app-search{
        width: 85%;
        height: 2.1875rem;
        background: rgba(0,0,0,.3);
        margin: .625rem auto 0 auto;
        border-radius: .3125rem;
        padding: 0 .625rem;

        .icon-search{
          color: #fff !important;
        }

        input{
          color: #fff;
          font-size: 1rem;
          margin-left: .625rem;
        }
        input::placeholder {
          font-size: 1rem; /* 设置placeholder的字体大小为1rem */
        }
      }

    }
    .meun-popup{
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.3);
      z-index: 998;
    }
    .meun-nav{
      width: 100%;
      background-color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      transform: translate3d(0, -100%, 0);
      transition: all .3s cubic-bezier(.25, .5, .5, .9);

      &.meun-nav-on{
        transform: translate3d(0, 0, 0);
      }

      .app-meun-logo{
        width: 8.5625rem;
        height: 2.1875rem;
      }

      .meun-item{
        height: 3.125rem;

        &.bg-on{
          background-color: #E9EFEE;
          color: #1E5A54;
        }

        .title{
          font-size: 1rem;
        }
      }

    }

    .Top20_ProblemAnalysis {
      //width: 100%;
      //height: calc(100vh - 10rem);
      //position: relative;
      //display: flex;
      //justify-content: center;
      //align-items: center;
      //color: #fff;
      .rightNav {
        //width: 65%;
        //height: 31.25rem;
        //background: white;
        //max-width: 12.5rem;
        //margin-top: 1.25rem;

        .tab-nav {
          padding: 1rem;
          list-style: none;

          li {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            cursor: pointer;
            user-select: none;

            .nav {
              padding: 1rem 0;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              i {
                transition: 0.3s;
                color: #333333;
              }

              span {
                display: inline-block;
                width: 100%;
                text-align: left;
                color: #808080;
                font-size: 0.88rem;
                margin-left: 1rem;
              }
            }

            .nav-n-box {
              transition: 0.3s;
              width: 100%;
              height: 0;
              overflow: hidden;

              .nav-n {
                width: 100%;
                font-size: 0.88rem;
                color: #808080;
                height: 2rem;
                text-align: left;
                padding-left: 2rem;
                line-height: 2rem;
                transition: 0.3s;

                &:hover {
                  background-color: #E9EFEE;
                  color: #1E5A54;
                  opacity: 0.5;
                }
              }
            }
          }
        }
      }

      //点击后右箭头的反转效果
      .nav-n-box-active {
        #right-btn {
          transform: rotate(180deg) !important;
        }
      }
    }

    .tow-meun-popup{
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      z-index: 998;
    }

    .tow-meun{
      background: #1E5A54;
      position: fixed;
      top: 3.125rem;
      left: 0;
      right: 0;
      padding: 0 1.25rem;
      color: #ffffff;
      z-index: 999;

      .tow-meun-nav{
        height: 2.875rem;
        z-index: 9999;

        .icon-fanhui{
          font-size: .875rem;
          margin-right: .9375rem;
        }
        .title{
          font-size: 1.125rem;
        }
        .icon-arrow-bottom{
          color: #ffffff;
        }

      }

      .tow-meun-item{
        width: 100%;
        padding-bottom: 1.25rem;
        /*position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: translate3d(0, -100%, 0);
        transition: all .3s cubic-bezier(.25, .5, .5, .9);*/

        &.tow-meun-on{
          transform: translate3d(0, 0, 0);
        }

        .item{
          padding-top: 1.25rem;
          font-size: .875rem;
        }

      }



    }

    .menu-not-home{
      background: #ffffff;
      color: #000000 !important;

      .icon-search,.icon-caidan{
        color: #000000 !important;
      }

    }



  }

</style>